import React,{ PureComponent } from 'react';
import { connect } from 'react-redux'
import { withRouter  } from 'react-router-dom'
import { DetailHeader, DetailWrapper, Content } from './style';
import { actionCreator } from './store'

class Detail extends PureComponent{
  render() {
    return (
      <DetailWrapper>
        <DetailHeader>{this.props.title}</DetailHeader>
        <Content dangerouslySetInnerHTML={{__html: this.props.content}} />
      </DetailWrapper>
    )
  }

  componentDidMount() {
    this.props.getDetail(this.props.match.params.id)
  }
}

const mapStateToProps = (state) => ({
  title: state.getIn(['detail', 'title']),
  content: state.getIn(['detail', 'content'])
});

const mapDispatchToProps = (dispatch) => ({
  getDetail(id) {
    dispatch(actionCreator.detailAjax(id));
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Detail));